<template>
	<view class="page">
		<!-- 顶部固定栏 -->
		<view class="header">
			<text class="header-title">消息中心</text>
		</view>

		<!-- 内容区域 -->
		<scroll-view scroll-y class="content">
			<!-- 消息分类 -->
			<view class="message-types">
				<view class="type-item" v-for="(item, index) in messageTypes" :key="index">
					<image :src="item.icon" mode="aspectFill" />
					<text>{{ item.name }}</text>
					<view class="badge" v-if="item.unread">{{ item.unread }}</view>
				</view>
			</view>

			<!-- 消息列表 -->
			<view class="message-list">
				<view class="message-item" v-for="(item, index) in messages" :key="index" @tap="gotoChat">
					<image :src="item.avatar" mode="aspectFill" class="avatar" />
					<view class="message-content">
						<view class="message-header">
							<text class="name">{{ item.name }}</text>
							<text class="time">{{ item.time }}</text>
						</view>
						<view class="message-body">
							<text class="last-message">{{ item.lastMessage }}</text>
							<view class="unread-badge" v-if="item.unread">{{ item.unread }}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';

	const currentTab = ref(3);  // 默认选中消息tab

	const messageTypes = ref([
		{
			name: '点赞和收藏',
			icon: 'https://ai-public.mastergo.com/ai/img_res/6f821e43762c0025accfb719874a2aba.jpg',
			unread: 12
		},
		{
			name: '评论消息',
			icon: 'https://ai-public.mastergo.com/ai/img_res/615905308bb7570df471498693314273.jpg',
			unread: 5
		},
		{
			name: '系统通知',
			icon: 'https://ai-public.mastergo.com/ai/img_res/8a5e122e7a70caa03ff022f8eb6e68c9.jpg',
			unread: 1
		},
		{
			name: '互动消息',
			icon: 'https://ai-public.mastergo.com/ai/img_res/5681ca2cbb6d60bc70a512a63d9b4503.jpg',
			unread: 3
		}
	]);

	const messages = ref([
		{
			name: '汪汪俱乐部',
			avatar: 'https://ai-public.mastergo.com/ai/img_res/70dfb56d3343576ce5e73c91162e34b1.jpg',
			lastMessage: '您的爱犬已完成今日训练课程！',
			time: '10:30',
			unread: 2
		},
		{
			name: '小米',
			avatar: 'https://ai-public.mastergo.com/ai/img_res/c519a77832f2505441b7d68dfa156819.jpg',
			lastMessage: '今天带小米去公园玩吧~',
			time: '09:15',
			unread: 1
		},
		{
			name: '喵星人之家',
			avatar: 'https://ai-public.mastergo.com/ai/img_res/ed3afae8eeb2f13512b54b84e819974f.jpg',
			lastMessage: '周末宠物聚会开始报名啦！',
			time: '昨天',
			unread: 0
		},
		{
			name: '宠物医生王医生',
			avatar: 'https://ai-public.mastergo.com/ai/img_res/cbf169b0f65b1f73e8ef3a15fcd02499.jpg',
			lastMessage: '记得按时给毛毛吃药哦',
			time: '昨天',
			unread: 0
		},
		{
			name: '毛毛美容院',
			avatar: 'https://ai-public.mastergo.com/ai/img_res/2deba48fb60aac449ffd450be2ec2658.jpg',
			lastMessage: '下周二的美容预约已确认',
			time: '周一',
			unread: 0
		}
	]);
	const gotoChat = () => {
		uni.navigateTo({
			url: '/packageMessages/pages/chatWave'
		})
	}
</script>

<style>
	page {
		height: 100%;
	}

	.page {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #f8f8f8;
	}

	.header {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		flex-shrink: 0;
	}

	.header-title {
		font-size: 18px;
		font-weight: bold;
		color: #333333;
	}

	.content {
		flex: 1;
		overflow: auto;
	}

	.message-types {
		display: flex;
		justify-content: space-around;
		padding: 40rpx 20rpx;
		background-color: #ffffff;
		margin-bottom: 20rpx;
	}

	.type-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.type-item image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-bottom: 16rpx;
	}

	.type-item text {
		font-size: 12px;
		color: #333333;
	}

	.badge {
		position: absolute;
		top: -6rpx;
		right: -6rpx;
		background-color: #ff6b6b;
		color: #ffffff;
		font-size: 12px;
		padding: 2rpx 8rpx;
		border-radius: 20rpx;
		min-width: 32rpx;
		height: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.message-list {
		background-color: #ffffff;
		padding: 0 30rpx;
	}

	.message-item {
		display: flex;
		padding: 30rpx 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.message-item:last-child {
		border-bottom: none;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.message-content {
		flex: 1;
	}

	.message-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.name {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.time {
		font-size: 12px;
		color: #999999;
	}

	.message-body {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.last-message {
		font-size: 14px;
		color: #666666;
		flex: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.unread-badge {
		background-color: #ff6b6b;
		color: #ffffff;
		font-size: 12px;
		padding: 2rpx 8rpx;
		border-radius: 20rpx;
		min-width: 32rpx;
		height: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 16rpx;
	}

	.tab-bar {
		display: flex;
		justify-content: space-around;
		padding: 16rpx 0;
		background-color: #ffffff;
		border-top: 1px solid #f0f0f0;
		flex-shrink: 0;
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tab-item text {
		font-size: 12px;
		color: #999999;
		margin-top: 6rpx;
	}

	.tab-item text.active {
		color: #ff6b6b;
	}
</style>
<style>
	page {
		height: 100%;
	}

	.page {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #f8f8f8;
	}

	.header {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		flex-shrink: 0;
	}

	.logo {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
		margin-right: 20rpx;
	}

	.search-box {
		flex: 1;
		display: flex;
		align-items: center;
		background-color: #f5f5f5;
		border-radius: 32rpx;
		padding: 12rpx 24rpx;
		margin: 0 20rpx;
	}

	.search-box input {
		flex: 1;
		font-size: 14px;
		margin-left: 12rpx;
	}

	.notify {
		padding: 10rpx;
	}

	.content {
		flex: 1;
		overflow: auto;
	}

	.function-area {
		display: flex;
		justify-content: space-around;
		padding: 40rpx 20rpx;
		background-color: #ffffff;
		margin-bottom: 20rpx;
	}

	.function-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.function-item image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-bottom: 16rpx;
	}

	.function-item text {
		font-size: 14px;
		color: #333333;
	}

	.article-section {
		background-color: #ffffff;
		padding: 30rpx;
	}

	.section-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.section-title text {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.more {
		display: flex;
		align-items: center;
	}

	.more text {
		font-size: 14px;
		color: #999999;
		margin-right: 4rpx;
	}

	.article-list {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -10rpx;
	}

	.article-item {
		width: calc(50% - 20rpx);
		margin: 10rpx;
		border-radius: 12rpx;
		overflow: hidden;
		background-color: #ffffff;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	.article-item image {
		width: 100%;
		height: 300rpx;
		object-fit: cover;
	}

	.article-info {
		padding: 20rpx;
	}

	.article-info .title {
		font-size: 14px;
		font-weight: bold;
		color: #333333;
		margin-bottom: 8rpx;
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.article-info .desc {
		font-size: 12px;
		color: #999999;
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.tab-bar {
		display: flex;
		justify-content: space-around;
		padding: 16rpx 0;
		background-color: #ffffff;
		border-top: 1px solid #f0f0f0;
		flex-shrink: 0;
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tab-item text {
		font-size: 12px;
		color: #999999;
		margin-top: 6rpx;
	}

	.tab-item text.active {
		color: #ff6b6b;
	}
</style>